<template>
  <div class="content">
    <div class="login-box">
      <div class="hd">
        <h3 class="title semibold">库尔勒市中小学入学服务平台</h3>
      </div>
      <div class="bd inner fn-clearfix">
        <div class="login">
          <h3>{{ isDelayApply ? "延缓入学登录" : "用户登录" }}</h3>
          <van-form @submit="submitForm" :show-error="false">
            <van-field
              v-model="ruleForm.idNo"
              name="idNo"
              left-icon="yonghu"
              :placeholder="
                isDelayApply == 'true'
                  ? '请输入身份证号'
                  : '请输入身份证号 / 证件号'
              "
              :rules="[{ required: true, message: '请输入身份证号/证件号' }]"
            >
              <van-icon
                class="iconfont icon01"
                slot="left-icon"
                name="yonghu"
              ></van-icon>
            </van-field>
            <van-field
              v-model="ruleForm.pwd"
              type="password"
              name="pwd"
              left-icon="suo"
              placeholder="输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <van-icon
                class="iconfont icon02"
                slot="left-icon"
                name="suo"
              ></van-icon>
            </van-field>
            <van-field
              class="code"
              v-model="ruleForm.code"
              name="code"
              left-icon="yanzhengma"
              placeholder="输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <van-icon
                class="iconfont icon03"
                slot="left-icon"
                name="yanzhengma"
              ></van-icon>
              <template #button>
                <div class="img-verify">
                  <img :src="verifyUrl" alt="" @click="refreshCode" />
                </div>
              </template>
            </van-field>
            <router-link class="forgot-btn" :to="{ path: '/forgot' }"
              >忘记密码？</router-link
            >
            <div class="footer-btn">
              <van-button round block type="info" native-type="submit"
                >登录</van-button
              >
              <div class="btn-link" @click="resetForm">注册</div>
            </div>
          </van-form>
        </div>
        <div class="prompt" v-if="!isDelayApply">
          <div class="prompt-hd">
            <h3 class="notice-title">温馨提示</h3>
          </div>
          <div class="prompt-bd" v-html="projectInfos.loginNote"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import fetches from "../utils/request";
const { defaultHost } = fetches;
import { getSysZt } from "../utils/api";
export default {
  name: "login",
  components: {},
  data() {
    return {
      ruleForm: {
        idNo: "",
        pwd: "",
        code: "",
      },
      isCodeCorrect: true, //验证码是否正确
      identifyCodes: "", //验证码随机数
      verifyUrl: "", //验证码图片
    };
  },
  computed: {
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
    isDelayApply() {
      return this.$store.state.isDelayApply;
    },
  },
  methods: {
    refreshCode() {
      const identifyCode = parseInt(Math.random() * 1000, 10);
      this.identifyCodes = identifyCode;
      this.verifyUrl = `${defaultHost}/api/Student/ValidateCode?key=${this.identifyCodes}`;
    },
    submitForm(values) {
      const params = {
        idNo: Base64.encode(this.ruleForm.idNo),
        pwd: Base64.encode(this.ruleForm.pwd),
        code: this.ruleForm.code,
      };
      if (this.isDelayApply) {
        this.$fetch(
          `/api/Student/DelayZmkm?key=${this.identifyCodes}`,
          params,
          "post"
        ).then((data) => {
          if (data.res == 0) {
            this.$store.dispatch("setUser", data.data.personDelay.name);
            this.$store.dispatch("setToken", data.data.token);
            this.$store.dispatch("setStuList", data.data.personDelay);
            // console.log(stuList);
            this.$router.push({ path: "/delayapply" });
          } else {
            this.refreshCode();
            this.$toast(data.msg);
          }
        });
      } else {
        this.$fetch(
          `/api/Student/Zmkm?key=${this.identifyCodes}`,
          params,
          "post"
        ).then((data) => {
          if (data.res == 0) {
            this.$store.dispatch("setUser", data.data.person.name);
            this.$store.dispatch("setToken", data.data.token);
            this.$store.dispatch("setStuList", data.data.person);
            let stuList = data.data.person;
            // console.log(stuList);
            if (stuList.step == 0) {
              this.$router.push({ path: "/basicinfo" });
            } else if (stuList.step == 1) {
              this.$router.push({ path: "/signup" });
            } else if (stuList.step == 2) {
              this.$router.push({ path: "/selectGrade" });
            } else if (stuList.step == 3) {
              this.$router.push({ path: "/results" });
            }
          } else {
            this.refreshCode();
            this.$toast(data.msg);
          }
        });
      }
    },
    resetForm() {
      this.$router.push({ path: "/register" });
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  created() {
    this.getSysZt();
  },
  mounted() {
    this.refreshCode();
    this.$store.dispatch("fetchGetProject", {
      sucCallback: (msg) => {
        //console.log(msg);
      },
      falCallback: (msg) => {
        //console.log(msg)
      },
    });
    this.$fetch(`/api/Student/GetSysPara`, { key: "SysName" }, "get").then(
      (data) => {
        if (data.res == 0) {
          this.$store.dispatch("setWpzswTitle", data.data[0].value);
        } else {
          this.$toast(data.msg);
        }
      }
    );
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login-box {
  .hd {
    height: 240px;
    background: url(~@/assets/images/bg_dl.png) no-repeat;
    // background-size: 100%;
    padding-top: 60px;
    .title {
      margin: auto;
      font-size: 42px;
      color: #fff;
      position: relative;
      &::before {
        content: "";
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-image: linear-gradient(164deg, #02c7ff 2%, #0195ff 100%);
        position: absolute;
        left: 67px;
        bottom: 0;
      }
      &::after {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: linear-gradient(162deg, #3aee91 2%, #26b050 79%);
        position: absolute;
        right: 76px;
        top: 0;
      }
    }
  }
  .bd {
    .login {
      margin-top: -120px;
      padding: 30px;
      text-align: left;
      border-radius: 20px;
      background-color: #fff;
      box-shadow: 0 1px 10px 0 rgba(153, 153, 153, 0.3);
      h3 {
        font-size: 36px;
        color: #000;
        font-family: PingFangSC-Semibold;
        margin-bottom: 50px;
      }
      .iconfont {
        margin-right: 12px;
        margin-top: 5px;
      }
      .icon01 {
        width: 36px;
        height: 36px;
        background: url(~@/assets/images/icon_yh.png) no-repeat center/cover;
      }
      .icon02 {
        width: 32px;
        height: 42px;
        margin-top: 3px;
        background: url(~@/assets/images/icon_mm.png) no-repeat center/cover;
      }
      .icon03 {
        width: 33px;
        height: 39px;
        background: url(~@/assets/images/icon_yzm.png) no-repeat center/cover;
      }
      .img-verify {
        width: 168px;
        height: 52px;
        border: 1px #dcdfe6 solid;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .forgot-btn {
        display: block;
        color: $bsC;
        font-size: 26px;
      }
      .footer-btn {
        margin: 59px 20px 0;
        text-align: center;
        .van-button {
          height: 88px;
          margin-bottom: 30px;
          font-size: 36px;
          background-image: linear-gradient(137deg, #07a2ff 0%, #0195ff 100%);
        }
        .btn-link {
          width: 80px;
          margin: 0 auto;
          line-height: 50px;
          font-size: 36px;
          color: $bsC;
        }
      }
    }
    .prompt {
      margin-top: 60px;
      text-align: left;
      .notice-title {
        color: #000;
      }
      .prompt-bd {
        padding: 20px 0 30px;
        line-height: 54px;
        font-size: 30px;
        color: #222;
        text-align: justify;
        /deep/ p {
          b {
            font-family: PingFangSC-Semibold;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.code {
  .van-field__button {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.footer-btn .van-button {
  height: 100px;
  font-size: 36px;
}
.login {
  .van-cell {
    padding: 20px 0 15px;
    margin-bottom: 20px;
  }
  .van-cell::after {
    left: 0;
    right: 0;
  }
  .van-icon {
    min-width: 0;
  }
}
</style>
